<template>
  <el-submenu v-if="menu.list && menu.list.length >= 1" :index="String(menu.menuId)">
    <template slot="title">
      <icon-svg class="svg-icon" :name="menu.icon || ''"></icon-svg>
      <span>{{ menu.name }}</span>
    </template>
    <sidebar-item v-for="item in menu.list" :key="item.menuId" :menu="item" :dynamicMenuRoutes="dynamicMenuRoutes">
    </sidebar-item>
  </el-submenu>
  <app-link v-else :to="resolvePath(menu)">
    <el-menu-item class="el-menu-item" :index="String(menu.menuId)">
      <icon-svg class="svg-icon" :name="menu.icon || ''"></icon-svg>
      <span>{{ menu.name }}</span>
    </el-menu-item>
  </app-link>
</template>

<script>
  import AppLink from './Link'

  export default {
    name: 'sidebarItem',
    components: {AppLink},
    props: {
      menu: {
        type: Object,
        required: true
      },
      dynamicMenuRoutes: {
        type: Array,
        required: true
      }
    },
    methods: {
      resolvePath(menu) {
        const route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)

        if (route.length >= 1) {
          return route[0].path
        }
        console.log(`%c 未找到 "${ menu.name}" 对应的组件`, 'color:red;')
        return ''
      }
    }
  }
</script>
